<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div, button{
            cursor: pointer;
        }
        .grandparent{
            border: 5px solid green;
            padding-bottom: 30px;
            padding-top: 30px;
        }

        .parent{
            border: 5px solid red;
            padding-bottom: 40px;
            padding-top: 40px;
        }
    </style>
</head>
<body>

<div class="grandparent">
     <div class="parent">
          <button class="child">Child</button>
     </div>
</div>

<script type="text/javascript" src="JqueryClassTwo/jquery-1.11.2.js"></script>
<script type="text/javascript">

    $('body').click(function (){
        console.log('body click is called');
    });
    $('.grandparent').click(function (){
        console.log('grand parent click is called');
    });

    //capturing phase // parent to child // netscape

    // event bubbling phase // child to parent //internet

    $('.child').click(function (event){
        console.log('child click is called');
        event.stopPropagation();


    });


</script>
</body>
</html>